<template>
  <div class="page">
    <div class="landDetail">
      <!-- <div class="back" @click="back()"><i class="el-icon-arrow-left"></i>返回</div> -->
      <div class="backFont"><el-button icon="el-icon-arrow-left" @click="back()">返回</el-button></div>
      <div class="landFlex">
        <landMap
        class="landMap"
        v-if="mapShow"
        :landDetailData="landDetail"
        ref="landMap"
      ></landMap>
      <div class="landMap" v-if="!mapShow">加载中...</div>
      <!-- 名称 -->
      <div class="landInfo">
        <div class="tit">
          <div class="landName">{{ landDetail.landName }}</div>
          <div class="landType">{{ landDetail.landType }}</div>
        </div>
        <div class="landArea">
          <div>占地面积：{{ landDetail.landArea }}亩</div>
          <div class="marginLeft">负责人：{{ landDetail.responsibfulePersonName }}</div>
        </div>
        <!-- 种植类型 -->
        <div class="plantType">
          <div class="plantList">
            <!-- 种植盒子 -->
            <div
              class="listBox"
              v-on:mouseover="handleMouseOver"
              v-if="landDetail.plantingVariety !== null"
            >
              <div class="listBox-l">
                <div class="pic">
                  <img :src="landDetail.pictureLink" />
                </div>
              </div>
              <div class="listBox-r">
                <div class="plantTit">
                  {{ landDetail.plantingVariety }}
                  <div class="landType">{{ landDetail.plantingStandards === 1 ? '有机' : '无机'}}</div>
                  <div class="landType landRed">{{ landDetail.seedWay === 1 ? '机械' : '人工'}}</div>
                </div>
                <div class="plantContent">品类：{{ landDetail.varietyName }}</div>
                <div class="plantContent">种植时间：{{ landDetail.plantingTime }}</div>
              </div>
            </div>
            <!-- 触碰遮罩层 -->
            <div
              class="hoverBox"
              v-show="hoverBoxVisible"
              v-on:mouseleave="handleMouseLeave"
            >
              <!-- v-if="hoverBoxVisible" -->
              <!-- <div class="report">检测报告</div> -->
              <div class="operation">
                <div
                  class="moreOperation"
                  @click="getPlantAdd()"
                >
                  采收
                </div>
                <div class="moreOperation" @click="dialogOver = true">结束种植</div>
                <el-dropdown placement="top" @command="handleCommand" v-show="!isHarvest">
                  <div class="moreOperation el-dropdown-link borderLeft">更多</div>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="edit">编辑</el-dropdown-item>
                    <el-dropdown-item command="delete">删除</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
                <div class="moreOperation borderLeft" v-show="isHarvest" @click="handleCommand('edit')">编辑</div>
              </div>
            </div>
            <div
              class="addType"
              v-if="landDetail.plantingVariety === null"
              @click="()=> { $router.push({ path: '/shuzhongtian/dashboard/seedAdd', query: $route.query })}"
            >
              <div class="addIcon">
                <img src="@/assets/images/addIconType.png" />
              </div>
              <div class="addText">添加种养品种</div>
            </div>
          </div>
        </div>
      </div>
      </div>
      <!-- //下拉菜单 -->
      <div class="mune">
        <el-dropdown @command="dropdownNext">
          <span class="el-dropdown-link">
            <!-- <i class="el-icon-arrow-down el-icon-menu"></i> -->
            <img class="el-icon-arrow-down" src="@/assets/images/landMore.png" />
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item :command="1">
              <img class="landImg" src="@/assets/images/landHistory.png" />
              历史种养品种
            </el-dropdown-item>
            <el-dropdown-item :command="2">
              <img class="landImg" src="@/assets/images/landEdit.png" />
              编辑地块
            </el-dropdown-item>
            <el-dropdown-item :command="3">
              <img class="landImg" src="@/assets/images/landDel.png" />
              删除地块
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <!-- 农事操作 -->
    <div class="farmOperation">
      <!-- 按钮 -->
      <div class="center">
        <div class="left-btn">
          <div
            class="agriMission"
            v-for="item in buttons"
            :key="item.id"
            :class="{ agriMissionActive: item.active }"
            @click="btnClick(item.id)"
          >
            {{ item.text }}
            <!-- <div v-if="item.active" class="btnClickImg">
              <img src="../../assets/iconImage/Frame 640.png" alt="" />
            </div> -->
          </div>
        </div>
        <!-- <div class="right-btn">
          <div v-if="tabId !== 2" class="addMission" @click="addMission(tabId)">
            <i class="el-icon-plus"></i>
            {{ tabId === 1 ? "新增计划" : tabId === 3 ? "添加报告" : "" }}
          </div>
        </div> -->
      </div>
      <!-- 农事计划 -->
      <div class="center monthMargin" :class="[1].includes(tabId) && 'flexEnd'">
        <div class="left-btn"  v-if="tabId === 4">
          <div
            class="agriMission"
            v-for="item in 12" :key="item"
            @click="nowMonthSelct = (item < 10 ? `0${item}` : item), changeMonth()"
            :class="nowMonthSelct === (item < 10 ? `0${item}` : item) && 'agriMissionActive'"
          >
            {{ item }}月
            <!-- <div v-if="item.active" class="btnClickImg">
              <img src="../../assets/iconImage/Frame 640.png" alt="" />
            </div> -->
          </div>
        </div>
        <div class="right-btn">
          <div v-if="tabId !== 2" class="addMission" @click="addMission(tabId)">
            <i class="el-icon-plus"></i>
            {{ tabId === 1 ? "新增农事" : tabId === 3 ? "添加报告" :  tabId === 4 ? "新增计划" : "" }}
          </div>
        </div>
      </div>
      <!-- tab切换内容 -->
      <div class="bottom">
        <dateTime
          v-if="tabId === 4 && dateList.length"
          ref="dateTime"
          :landMissionData="dateList"
        ></dateTime>
        <!-- 农事组件 -->
        <argiMission
          v-if="tabId === 1  && landMissionData.length"
          ref="argiMission"
          :landMissionData="landMissionData"
        ></argiMission>
        <!-- 土壤 -->
        <agriloil v-if="tabId === 3" :reportList="reportList"></agriloil>
        <!-- <div class="landLoil" >
          <div class="loil-l"></div>
          <div class="loil-r">
            <div class="operator">采样员：一号文</div>
            <div class="organization">检测机构：xx检测中心</div>
            <div class="date">2024-03-14</div>
            <div class="cost">费用：100</div>
          </div>
        </div> -->
      </div>
      <!-- 种植添加弹窗 -->
      <!-- <el-dialog
        title="种植添加"
        :visible.sync="dialogVisible"
        width="35%"
        :before-close="handleClose"
      >
        <seedAdd
          :sysSeedList="sysSeedList"
          :userList="userList"
          :landDetail="landDetail"
        ></seedAdd>
      </el-dialog> -->
      <!-- 检测报告 -->
      <el-dialog
        title="检测报告"
        :visible.sync="reportDialogVisible"
        width="width"
      >
        <div></div>
        <div slot="footer">
          <el-button @click="reportDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="reportDialogVisible = false"
            >确 定</el-button
          >
        </div>
      </el-dialog>
      <!-- <el-dialog
        title=""
        :visible.sync="harvestingDialogVisible"
        width="36vw"
      >
        <pick :userList="userList" @pickOver="pickOver"></pick>
      </el-dialog> -->
      <el-dialog
        width="460px"
        class="dialogClass"
        append-to-body
        :close-on-click-modal="false"
        :show-close="false"
        :visible.sync="dialogOver"
      >
        <div class="dialogHeader">“{{landDetail.plantingVariety}}”确定种植结束吗？</div>
        <div class="dialogMessage">Tips：可在“历史种植”中查看种植结束的作物</div>
        <div class="dialogTime">
          结束时间：
          <el-date-picker
            v-model="endTime"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            align="right"
            :clearable="false"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </div>
        <div class="dialogFooter">
          <el-button
            size="small"
            class="editBtn editBtnNone"
            @click="dialogOver = false"
            >取消</el-button
          >
          <el-button
            class="editBtn"
            type="primary"
            size="small"
            @click="plantOver()"
            >
            确定
          </el-button>
        </div>
      </el-dialog>
       <!-- 农事类型 -->
    <el-dialog
        width="460px"
        class="dialogClass"
        append-to-body
        :close-on-click-modal="false"
        :show-close="false"
        :visible.sync="dialogFarm"
      >
        <div class="dialogClose">
          <span>选择农事类型</span>
          <i class="el-icon-close" @click="dialogFarm = false"></i>
        </div>
        <div class="dialogButton">
          <el-button
            class="typeBtn"
            size="small"
            :class="farming.agriCode === item.code && 'checkBoxAll'"
            v-for="item in options"
            :key="item.id"
            @click="farming = item"
          >
            {{ item.name }}
          </el-button>
        </div>
        <div class="dialogFooter">
          <el-button
            size="small"
            class="editBtn editBtnNone"
            @click="dialogFarm = false"
            >取消</el-button
          >
          <el-button
            class="editBtn"
            type="primary"
            size="small"
            @click="toFarming()"
            >
            确定
          </el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import argiMission from './components/argiMission-components'
// import seedAdd from './components/seedAdd.vue'
import agriloil from './components/agriloil'
import landMap from './components/map.vue'
// import pick from './components/pick.vue'
import dateTime from './components/dateTime.vue'

import { getAgriListApi, getLandloilReportApi, endPlantingApi } from '@/api/mission'
import { getSysSonDictListApi, getUserListApi } from '@/api/dict'
import { getLandDetailApi, delLandInfoApi, isAgriculturalHarvest, deleteSeeding, getSeedDetail } from '@/api/agriLand'
import { getAgriplanListApi } from '@/api/baseInfo'
export default {
  name: 'agriLandDetail',
  components: {
    argiMission,
    // seedAdd,
    agriloil,
    landMap,
    // pick,
    dateTime
  },

  data () {
    return {
      dialogFarm: false,
      dialogOver: false,
      buttons: [
        { id: 4, text: '农事计划', active: false },
        { id: 2, text: '农情感知', active: false },
        { id: 1, text: '农事记录', active: false } // 初始状态为未激活
        // { id: 3, text: '土壤改良', active: false },
      ],
      tabId: 4,
      landMissionData: null,
      baseId: this.$route.query.baseId,
      seedingParams: {
        landId: this.$route.query.landId, // 从vuex取
        seedInfo: null,
        baseId: null, // 从vuex取
        seedType: null
      },
      params: {
        baseId: this.$route.query.baseId, //
        landId: this.$route.query.landId
      },
      dialogVisible: false, // 种养品种弹窗
      reportDialogVisible: false, // 报告
      sysSeedList: [],
      userList: [],
      hoverBoxVisible: false, //
      landDetail: {},
      mapShow: false,
      harvestingDialogVisible: false,
      nowMonthSelct: null,
      dateList: [],
      endTime: null,
      farming: {},
      options: [],
      isHarvest: false
    }
  },

  mounted () {
    this.nowMonthSelct = this.$moment(this.selectDate).format('MM')
    this.endTime = this.$moment().format('YYYY-MM-DD')
    this.params.startTime = `${this.$moment().format('YYYY')}-${this.nowMonthSelct}-01`
    this.params.endTime = `${this.$moment().format('YYYY')}-${this.nowMonthSelct}-${this.$moment(this.nowMonthSelct).daysInMonth()}`
    if (sessionStorage.getItem('tabIdLand')) {
      this.btnClick(Number(sessionStorage.getItem('tabIdLand')))
    } else {
      this.btnClick(4)
    }
    // this.getSysSeed()
    this.$store.dispatch('mission/removemissionDetail')
    this.getLandloilReport(this.params).then(() => {
      this.mapShow = true
    })
  },
  async created () {
    await this.getLandDetail(this.params)
    await this.getIsHarvest()
  },
  methods: {
    // 判断是否采收
    async getIsHarvest () {
      await isAgriculturalHarvest({ agriId: this.landDetail.agriArcId }).then(res => {
        this.isHarvest = res.data
      })
    },
    // 查询是否采收
    handleCommand (command) {
      switch (command) {
        case 'edit':
          this.$router.push({
            path: '/shuzhongtian/dashboard/seedAdd',
            query: { ...this.$route.query, agriArcId: this.landDetail.agriArcId }
          })
          break
        case 'delete':
          this.delBtnHarvest()
          break
      }
    },
    // 删除按钮
    async delBtnHarvest () {
      this.$alert(
        'Tips：删除后该种养品种相关信息将会删除，请谨慎操作！',
        '确定删除？',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          customClass: 'alertClass',
          showCancelButton: true,
          closeOnClickModal: false,
          showClose: false
        }).then(async () => {
        const { data } = await getSeedDetail({ agriArcId: this.landDetail.agriArcId })
        const res = await deleteSeeding({ id: data.seedId })
        if (res.code === 200) {
          this.$message.success('删除成功')
          this.getLandDetail(this.params)
          this.getIsHarvest()
          if (sessionStorage.getItem('tabIdLand')) {
            this.btnClick(Number(sessionStorage.getItem('tabIdLand')))
          } else {
            this.btnClick(4)
          }
        } else {
          this.$message.error('删除失败')
        }
      })
        .catch(action => {
        })
    },
    // 获取农事类型
    getDictList () {
      this.dialogFarm = true
      this.getSysSonDictList('NS')
    },
    // 字典接口
    async getSysSonDictList (code) {
      const res = await getSysSonDictListApi(code)
      this.options = res.data
    },
    // 新建农事
    toFarming () {
      this.$router.push({
        path: '/shuzhongtian/agriMissionAdd',
        query: {
          ...this.$route.query,
          name: this.farming.name,
          code: this.farming.code
        }
      })
    },
    // 采收跳转
    getPlantAdd () {
      this.$router.push({
        path: '/shuzhongtian/dashboard/pick',
        query: {
          ...this.$route.query,
          plantingVariety: this.landDetail.plantingVariety
        }
      })
    },
    // 月份修改
    async changeMonth (val) {
      this.params.startTime = `${this.$moment().format('YYYY')}-${this.nowMonthSelct}-01`
      this.params.endTime = `${this.$moment().format('YYYY')}-${this.nowMonthSelct}-${this.$moment(this.nowMonthSelct).daysInMonth()}`
      await this.getDateList(this.params)
    },
    // 获取农事计划
    async getDateList () {
      this.dateList = []
      const res = await getAgriplanListApi({
        landId: this.$route.query.landId,
        baseId: this.$route.query.baseId,
        startTime: this.params.startTime,
        endTime: this.params.endTime
      })
      this.dateList = res.data
      // this.btnClick(4)
    },
    // 采收提交
    async pickOver () {
      this.harvestingDialogVisible = false
      await this.getAgriList(this.params)
      if (this.tabId === 1) {
        this.$refs.argiMission.changeData()
      }
    },
    // 结束种植
    plantOver () {
      // this.$confirm('此操将结束该地快的种植, 是否继续?', '提示', {
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      //   type: 'warning'
      // }).then(() => {
      //   endPlantingApi(this.landDetail).then(() => {
      //     this.$message({
      //       type: 'success',
      //       message: '结束成功!'
      //     })
      //     this.getAgriList(this.params)
      //     // this.$router.go({ path: this.$route.path })
      //   })
      // }).catch(() => {
      //   this.$message({
      //     type: 'info',
      //     message: '已取消'
      //   })
      // })
      if (!this.endTime) {
        this.$message({
          type: 'error',
          message: '请选择日期'
        })
        return
      }
      endPlantingApi({
        ...this.landDetail,
        endTime: this.endTime
      }).then(() => {
        this.$message({
          type: 'success',
          message: '结束成功!'
        })
        this.dialogOver = false
        this.getAgriList(this.params)
        this.getLandDetail(this.params)
      })
    },
    // 添加种植物
    addPlantBtn () {
      this.dialogVisible = true
      this.getSysSeed()
    },
    // 种植类型触碰事件
    handleMouseOver () {
      this.hoverBoxVisible = true
    },
    // 进入页面调地块详情
    async getLandDetail (params) {
      const res = await getLandDetailApi(params)
      this.landDetail = res.data[0]
    },
    handleMouseLeave () {
      this.hoverBoxVisible = false
    },
    // tab按钮
    btnClick (id) {
      // console.log(this.landDetail, '详情页')
      // console.log(id)
      this.tabId = id
      sessionStorage.setItem('tabIdLand', id)
      const button = this.buttons.find((btn) => btn.id === id)
      button.active = true // 标记按钮为激活状态
      // 取消其他按钮的激活状态和字体大小
      this.buttons.forEach((btn) => {
        if (btn.id !== id) {
          btn.active = false
        }
      })
      if (this.tabId === 1) {
        this.getAgriList(this.params)
      }
      if (this.tabId === 4) {
        this.getDateList(this.params)
      }
    },
    // 农事任务
    async getAgriList (params) {
      this.landMissionData = []
      const res = await getAgriListApi(params)
      this.landMissionData = res.data
      // this.btnClick(1)
    },
    // 播种字典表
    async getSysSeed () {
      const res = await getSysSonDictListApi('ZZZL')
      // console.log(res)
      this.sysSeedList = res.data
      const res2 = await getUserListApi(this.baseId)
      // console.log(res2)
      this.userList = res2.data
    },
    // 跳转农事页新增
    addMission (id) {
      if (id === 1) {
        // this.$router.push({
        //   path: '/shuzhongtian/agriMissionAdd',
        //   query: {
        //     ...this.$route.query
        //   }
        // })
        this.getDictList()
      }
      if (id === 3) {
        this.$router.push({
          path: '/shuzhongtian/addLoilReport',
          query: {
            ...this.$route.query
          }
        })
      }
      if (id === 4) {
        this.$router.push({
          path: '/shuzhongtian/dashboard/planAdd',
          query: {
            ...this.$route.query,
            landName: this.landDetail.landName
          }
        })
      }
    },
    // 土壤检测list
    async getLandloilReport (params) {
      const res = await getLandloilReportApi(params)
      this.reportList = res.data
    },
    // 弹窗事件
    handleClose (done) {
      done()
    },
    // 返回
    back () {
      this.$router.push({
        path: '/shuzhongtian/agriLand'
      })
      // this.$router.go(-1)
    },
    // 下拉事件触发
    dropdownNext (event) {
      switch (event) {
        case 1:
          sessionStorage.setItem('historyLand', JSON.stringify(this.landDetail))
          this.$router.push({ path: '/shuzhongtian/dashboard/history', query: this.$route.query })
          break
        case 2:
          this.$router.push({
            path: '/shuzhongtian/agriAreaAdd',
            query: {
              landId: this.$route.query.landId
            }
          })
          break
        case 3:
          this.delBtn()
          break
      }
    },
    // 删除按钮
    async delBtn (id) {
      this.$alert(
        'Tips：删除后该地块相关信息（种养种类、采收记录、农事计划、农事记录）都将会被删除）',
        '确定删除该地块吗？',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          customClass: 'alertClass',
          showCancelButton: true,
          closeOnClickModal: false,
          showClose: false
        }).then(async () => {
        const res = await delLandInfoApi(this.$route.query.landId)
        if (res.code === 200) {
          this.$message.success('删除成功')
          this.$router.go(-1)
        } else {
          this.$message.error('删除失败')
        }
      })
        .catch(action => {
        })
    }
  }
}
</script>
<style lang="scss" scoped>
// .page {
// @media screen and (max-width: 1450px) {}
// }
.mune {
  position: absolute;
  right: 10px;
  top: 50px;
  .el-icon-arrow-down {
    width: 30px;
  }
}
::v-deep .el-dropdown-menu__item {
  display: flex;
  align-items: center;
  .landImg {
    width: 18px;
    margin-right: 9px
  }
}
.landDetail {
  background: #ffffff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  padding-bottom: 30px;
  // margin: 0 auto;
  position: relative;
  .landFlex {
    margin-top: 20px;
    display:  flex;
    align-items: flex-start;
  }
  .back {
    position: absolute;
    top: 1.0417vw;
    cursor: pointer;
    font-size: 24px;
  }
  .landMap {
    width: 195px !important;
    height: 195px !important;
    background: #edf1f4;
    border-radius: 6px;
  }
  .tit {
    display: flex;
    margin-left: 0.2rem;
    align-items: center;
    .landName {
      margin-right: 0.15rem;
      font-family: PingFang SC, PingFang SC;
      font-weight: 600;
      font-size: 0.26rem;
      color: #2a2a31;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
  }
  .landArea {
    margin: 0.15rem 0 0.35rem 0.2rem;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 0.2rem;
    color: #999;
    line-height: 0.29rem;
    text-align: left;
    font-style: normal;
    text-transform: none;
    display: flex;
    align-items: center;
    .marginLeft {
      margin-left: 40px;
    }
  }
  .landType {
    padding: 2px 6px 3px 6px;
    height: unset;
    background: unset;
    border: 1px solid #00C586;
    border-radius: 2px;
    text-align: center;
    color: #00C586;
    font-size: 14px;
  }
  .plantType {
    margin-left: 0.2rem;
    display: flex;
    .plantList {
      // width: 12.15rem;
      // height: 1.65rem;
      // background: #fff;
      // border-radius: 0.15rem 0.15rem 0.15rem 0.15rem;
      display: flex;
      .listBox {
        width: 320px;
        height: 100px;
        background: #FAFAFA;
        border-radius: 2px;
        display: flex;
        align-items: center;
        .listBox-l {
          .pic {
            width: 80px;
            height: 80px;
            margin-right: 10px;
            img {
              width: 80px;
              height: 80px;
            }
          }
        }
        .listBox-r {
           width: 100%;
          .landType {
            font-size: 12px;
            margin-left: 5px;
          }
          .landRed {
            border: 1px solid #FA6621;
            color: #FA6621
          }
          .plantTit {
            font-size: 20px;
            font-weight: bold;
            display: flex;
            align-items: center;
            width: 100%;
          }
          .plantContent {
            margin-top: 8px;
            color: #666666
          }
        }
      }
    }
    .hoverBox {
      position: absolute;
      width: 320px;
      height: 100px;
      border: 1px solid #00C586;
      border-radius: 2px;
      color: #fff;
      .report {
        margin-top: 1.0417vw;
        font-size: 0.8333vw;
        width: 5.2083vw;
        height: 1.5625vw * 0.834;
        background: #19b560;
        border-radius: 8px 8px 8px 8px;
        text-align: center;
        line-height: 1.5625vw * 0.834;
        cursor: pointer;
      }
      .operation {
        width: 100%;
        background: #00C586;
        font-size: 12px;
        display: flex;
        justify-content: flex-end;
        position: absolute;
        bottom: 0;
        padding: 10px 15px;
        .recovery {
          cursor: pointer;
        }
        .moreOperation {
          cursor: pointer;
          margin-left: 10px;
          padding-left: 10px;
          color: #fff;
          font-size: 12px;
        }
        .borderLeft {
          border-left: 1px solid rgba(255, 255, 255, 0.20);
        }
      }
    }
    .addType {
      width: 100px;
      height: 100px;
      // background: #eff4f4;
      border-radius: 3px;
      border: 1px solid #999;
      text-align: center;
      color: #999;
      .addIcon {
        margin-top: 15px;
        img {
          width: 50px;
        }
      }
    }
  }
}
.farmOperation {
  background: #ffffff;
  // border-radius: 20px 20px 20px 20px;
  padding: 1.0417vw 0;
  .monthMargin {
    margin-top: 20px;
    align-items: center;
    .agriMission {
      font-size: 14px !important;
      height: 22px !important;;
      line-height: 1;
    }
  }
  .center {
    display: flex;
    justify-content: space-between;
    // margin: 1.0417vw 0;
    .left-btn {
      display: flex;
      // 农事记录
      .agriMission {
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 16px;
        color: #999;
        height: 30px;
        line-height: 1;
        text-align: left;
        font-style: normal;
        text-transform: none;
        margin-right: 50px;
      }
      .agriMissionActive {
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        color: #28bd87;
        text-align: left;
        font-style: normal;
        text-transform: none;
        border-bottom: 2px solid #28bd87;

        img {
          width: 1.2rem;
          height: 0.23rem;
        }
      }
    }
    .right-btn {
      display: flex;
      .agriMaterials {
        width: 1.38rem;
        height: 0.6rem;
        background: linear-gradient(270deg, #2bbf64 0%, #7ebf2b 100%);
        border-radius: 0.1rem 0.1rem 0.1rem 0.1rem;
        text-align: center;
        line-height: 0.6rem;
        margin-right: 0.1rem;
        color: #fff;
      }
      .addMission {
        width: 1.2rem;
        height: 0.45rem;
        background: #00C586;
        border-radius: 3px;
        text-align: center;
        line-height: 0.45rem;
        color: #fff;
      }
    }
  }
  .bottom {
    margin-top: 0.4rem;
    // height: 38vh;
    // overflow-y: auto;
  }
}

.landLoil {
  width: 14rem;
  height: 2rem;
  background: #fff;
  display: flex;
  justify-content: space-between;
  .loil-l {
    width: 1rem;
    height: 1rem;
    border: 1px solid #ccc;
  }
}

</style>
